<!DOCTYPE html>
<html lang="en" xmlns:el-dialog="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Element UI:Dropdown下拉菜单</title>
    <link rel="stylesheet" href="../element/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element/index.js"></script>
    <style>
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-dropdown>
        <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>退出系统</el-dropdown-item>
            <el-dropdown-item disabled>disabled：</el-dropdown-item>
            <el-dropdown-item divided>divided</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</div>
<div id="app2">
    <el-dropdown trigger="click">
        <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>ggg</el-dropdown-item>
            <el-dropdown-item disabled>hhhh</el-dropdown-item>
            <el-dropdown-item divided>llll</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</div>
<div id="app3">
    <el-dropdown split-button trigger="click">
        <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>1111</el-dropdown-item>
            <el-dropdown-item disabled>2222</el-dropdown-item>
            <el-dropdown-item divided>33333</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</div>


<!--
注意点：
1，导包三个位置别错
2，el-dropdown-menu slot=“dropdown”别写错！是slot！是slot！
3，别忘了写vue
-->
</body>
<script>
    new Vue({
        el: "#app"
    })
    new Vue({
        el:"#app2"
    })
    new Vue({
        el:"#app3"
    })
</script>
</html>